<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts 面积图</title>
  <script src="echarts.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
  <div id="main" style="width: 100%; height: 150px"></div>
  <script type="text/javascript">
    // 初始化图表实例
    var myChart = echarts.init(document.getElementById("main"));

    // 定义自定义颜色
    const colors = {
      primary: "#FF3245",
      secondary: "#FF3245",
      areaStart: "rgba(255,50,69, 0.8)",
      areaEnd: "rgba(255,50,69, 0.05)",
      lineColor: "#FF3245",
      pointColor: "#FF3245",
      pointBorder: "#FF3245",
    };

    // 图表配置项（数据留空，由iOS传入）
    var option = {
     // title: { text: "Stacked Area Chart" },
      tooltip: {
        trigger: "axis",
        
      },
      grid: {top:'10%', left: "5%", right: "5%", bottom: "1%", containLabel: true },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: [] // x轴数据由iOS传入
        }
      ],
      yAxis: [
        {
          type: "value",
          //name: "温度",
          position: "left",
          alignTicks: true
        }
      ],
      dataZoom: [{ type: "inside", startValue: 0, endValue: 9 ,orient: "horizontal",
          // 禁止垂直方向缩放（只关注左右滑动）
          zoomLock: true,
          // 启用触摸滑动（移动端关键）
          moveOnTouch: true,
          // 禁用鼠标滚轮（移动端不需要）
          moveOnMouseWheel: false}],
      series: [
        {
          name: "数量",
          type: "line",
          stack: "Total",
          areaStyle: {
            color: {
              type: "linear",
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: colors.areaStart },
                { offset: 1, color: colors.areaEnd }
              ]
            }
          },
          lineStyle: { color: colors.lineColor, width: 1 },
          // 数据点样式
                      itemStyle: {
                        color: colors.pointColor,
                        borderColor: colors.pointBorder,
                        borderWidth: 1,
                        shadowBlur: 2,
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                      },
          data: [] // y轴数据由iOS传入
        }
      ]
    };

    // 初始化图表
    myChart.setOption(option);

    // 供iOS调用的方法：更新图表数据
    function updateChart(xData, yData) {
      // 验证数据格式
      if (!Array.isArray(xData) || !Array.isArray(yData)) {
        console.error("数据格式错误，需传入数组");
        return;
      }
      // 更新x轴和系列数据
      option.xAxis[0].data = xData;
      option.series[0].data = yData;
      // 重新渲染图表
      myChart.setOption(option);
    }
  </script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
  </style>
</body>
</html>
